<template>
<div class="merchandise-categories-add views-container">
    <el-dialog :visible.sync="dialogVisibleImg" width="50%" custom-class="reset-pwd wlm-form-dialog dialog-table">
        <div class="wlm-form">
            <div class="wlm-form-header wlm-dialog-fixheader">
                <span class="wlm-dialog-inlenr">版权信息</span>
            </div>
            <div class="flex-row flex-justify-c" style="margin:30px 0 40px">
                <img height="280" src="../../assets/store/banquan.png" alt="">
            </div>
        </div>
    </el-dialog>
    <div class="wlm-form">
        <div class="wlm-form-header">平台设置</div>
        <div class="wlm-form-content">
            <el-form ref="platform" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                <el-form-item label="平台名称">
                    <el-input v-model.trim="formFormatData.formData.name" style="width:80%">
                    </el-input>
                </el-form-item>
                <el-form-item label="平台logo">
                    <choose-files ref="chooseFiles" :config="chooseLogoConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                    <div class="form-help">建议尺寸400*400</div>
                </el-form-item>
                <el-form-item label="加载图标">
                    <choose-files ref="chooseFiles" :config="chooseIconConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                    <div class="form-help">建议尺寸100*100，为空时使用系统默认图标</div>
                </el-form-item>
                  <el-form-item label="默认加载图标颜色">
                    <el-color-picker class="ivu-input" style="margin-left:50px;"  v-model="formFormatData.formData.icon_color" size="mini"></el-color-picker>
                </el-form-item>
                <el-form-item label="加载动画文字自定义颜色">
                    <el-color-picker class="ivu-input" style="margin-left:50px;"  v-model="formFormatData.formData.description" size="mini"></el-color-picker>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div class="wlm-form" v-if="isCopyright">
        <div class="wlm-form-header">版权信息</div>
        <div class="wlm-form-content">
            <el-form ref="platform" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                  <el-form-item label="版权类型">
                     <el-radio-group v-model="formFormatData.formData.copyright_diy">
                        <el-radio label="1">文本图标样式</el-radio>
                        <el-radio label="2">富文本样式</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <div v-if="formFormatData.formData.copyright_diy==1">
                     <el-form-item label="平台名称">
                    <el-input v-model.trim="formFormatData.formData.app_name">
                    </el-input>
                </el-form-item>
                <el-form-item label="平台logo">
                    <choose-files ref="chooseFiles" :config="chooseCopyrightConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                    <div class="form-help">建议尺寸400*400</div>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 4}" v-model.trim="formFormatData.formData.app_describe">
                    </el-input>
                    <el-button style="display:block" type="text" @click="dialogVisibleImg = true">点击查看示例</el-button>
                </el-form-item>
                  </div>
                  <div v-if="formFormatData.formData.copyright_diy==2">
                    <el-form-item label="富文本样式">
                        <ueditor
                        v-if="iscopy"
                        :ueditorChange="copyInfoChange"
                        :ueditorList="ueditorList"
                        :bindIndex="1"
                        :defaultMsg='defaultMsg4'
                        :config='{initialFrameWidth: null,initialFrameHeight: 350}'
                        ref="by_know"></ueditor>
                        <!-- <ueditor
                          v-if="isEnd"
                          :ueditorChange="sprivacyInfoChange"
                          :ueditorList="ueditorList"
                          :bindIndex="1"
                          :defaultMsg='defaultMsg3'
                          :config='{initialFrameWidth: null,initialFrameHeight: 350}'
                          ref="by_know"></ueditor> -->
                </el-form-item>

                  </div>
            </el-form>
        </div>
    </div>

    <div class="wlm-form">
        <div class="wlm-form-header">客服信息</div>
        <div class="wlm-form-content">
            <el-form ref="help" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                <el-form-item label="客服微信号">
                    <el-input v-model.trim="formFormatData.formData.kf_wxid">
                    </el-input>
                </el-form-item>
                <el-form-item label="客服电话">
                    <el-input v-model.trim="formFormatData.formData.kf_phone">
                    </el-input>
                </el-form-item>
                <el-form-item label="客服微信二维码">
                    <choose-files ref="chooseFiles" :config="chooseQrConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                    <div class="form-help">建议尺寸：400*400</div>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <div class="wlm-form">
        <div class="wlm-form-header">用户协议</div>
        <div class="wlm-form-content">
            <el-form ref="user" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                <el-form-item label="提醒开关">
                    <el-radio-group v-model="formFormatData.formData.helpbtn">
                        <el-radio label="1">开启</el-radio>
                        <el-radio label="0">关闭</el-radio>
                    </el-radio-group>
                    <div class="form-help">根据2019年新电商法要求，电商平台需要提供平台服务协议、隐私保护政策，开启该开关，则用户初次进入系统时进行弹框提示。</div>
                </el-form-item>

                <el-form-item label="弹窗文案">
                    <el-input type="textarea" v-model="formFormatData.formData.helpinfo" :autosize="{ minRows: 4, maxRows: 4}" style="width:80%;">
                    </el-input>
                    <div class="form-help">提醒弹窗文案内容我们已为您初始化一套模版，请根据您的需要进行修改使用。原文模版点此下载：
                      <el-button v-if="isIndependent" type="text" v-exceldown="{path:'web/doc/用户授权弹窗说明.doc', isBase: false}">查看模板</el-button>
                      <el-button v-if="!isIndependent" type="text" v-exceldown="{path:'addons/weliam_areashop/web/doc/用户授权弹窗说明.doc', isBase: false}">查看模板</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="平台资质">
                    <ueditor
                      v-if="isFirst"
                      :ueditorChange="shopInfoChange"
                      :ueditorList="ueditorList"
                      :bindIndex="1"
                      :defaultMsg='defaultMsg1'
                      :config='{initialFrameWidth: null,initialFrameHeight: 350}'
                      ref="by_know"></ueditor>
                </el-form-item>

                <el-form-item label="服务协议">
                    <ueditor
                      v-if="isDelay"
                      :ueditorChange="serverInfoChange"
                      :ueditorList="ueditorList"
                      :bindIndex="1"
                      :defaultMsg='defaultMsg2'
                      :config='{initialFrameWidth: null,initialFrameHeight: 350}'
                      ref="by_know"></ueditor>
                    <div class="form-help">平台服务协议内容我们已为您初始化一套模版，请根据您的需要进行修改使用。原文模版点此下载：
                      <el-button v-if="isIndependent" type="text" v-exceldown="{path:'web/doc/平台服务.docx', isBase: false}">查看模板</el-button>
                      <el-button v-if="!isIndependent" type="text" v-exceldown="{path:'addons/weliam_areashop/web/doc/平台服务.docx', isBase: false}">查看模板</el-button>
                    </div>
                </el-form-item>

                <el-form-item label="隐私政策">
                    <ueditor
                      v-if="isEnd"
                      :ueditorChange="sprivacyInfoChange"
                      :ueditorList="ueditorList"
                      :bindIndex="1"
                      :defaultMsg='defaultMsg3'
                      :config='{initialFrameWidth: null,initialFrameHeight: 350}'
                      ref="by_know"></ueditor>
                    <div class="form-help">隐私保护政策内容我们已为您初始化一套模版，请根据您的需要进行修改使用。原文模版点此下载：
                      <el-button v-if="isIndependent" type="text" v-exceldown="{path:'web/doc/隐私政策.docx', isBase: false}">查看模板</el-button>
                      <el-button v-if="!isIndependent" type="text" v-exceldown="{path:'addons/weliam_areashop/web/doc/隐私政策.docx', isBase: false}">查看模板</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="saveForm" type="primary">保存</el-button>
    </div>
</div>
</template>

<script>
import ChooseFiles from '@/components/ChooseFiles/index'
import ueditor from '@/components/Ueditor/index'
import exceldown from '@/directive/exceldown'
import {
  baseGet,
  baseSave,
  isCopyright
} from '@/api/setting'
import { mapGetters } from 'vuex'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'ManagementUserAdd',
  components: {
    ChooseFiles,
    ueditor
  },
  directives: {
    exceldown
  },
  created() {
    const _this = this
    // 当前页面监视键盘输入
    document.onkeydown = function(e) {
      // 事件对象兼容
      // 用于开发者上传代码
      _this.uploadSettings += e.key
      if (_this.uploadSettings === '_*-') {
        _this.$router.push('/setting/uploadSettings')
        // this.decrease()
      }
    }

    isCopyright().then((res) => {
      const { data } = res.data
      this.isCopyright = data
    })
  },
  computed: {
    ...mapGetters([
      'independent'
    ]),
    isIndependent() {
      return this.$store.getters.independent
    }
  },
  data() {
    return {
      uploadSettings: '_',
      isCopyright: false,
      isFirst: false,
      isDelay: false,
      isEnd: false,
      iscopy: false,
      dialogVisibleImg: false,
      ueditorList: [],
      defaultMsg1: '',
      defaultMsg2: '',
      defaultMsg3: '',
      defaultMsg4: '',
      chooseLogoConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: false,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'logo',
          model: 'img'
        }
      },
      chooseIconConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: false,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'load_logo',
          model: 'img'
        }
      },
      chooseCopyrightConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: false,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'app_logo',
          model: 'img'
        }
      },
      chooseQrConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: false,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'kf_qr',
          model: 'img'
        }
      },
      formFormatData: {
        key: ['help', 'platform', 'user'],
        api: {
          editForm: {
            api: baseGet,
            params: {
              always: true
            },
            filters: {
              img: {
                bindInit: ['chooseLogoConfig', 'chooseIconConfig', 'chooseCopyrightConfig', 'chooseQrConfig']
              }
            }
          },
          submitForm: baseSave
        },
        formData: {
          name: '',
          kf_phone: '',
          helpbtn: '0',
          copyright_diy: '1',
          logo: [],
          app_name: '',
          app_logo: [],
          load_logo: [],
          app_describe: '',
          description:'#666666',
          icon_color:'#ffe26e',
          app_guide: '',
          kf_qr: [],
          kf_wxid: '',
          license: '',
          copyright: '',
          agreement: '',
          policy: '',
          helpinfo: ''
        },
        rules: {
          // name: [{
          //   required: true,
          //   message: '请输入真实姓名',
          //   trigger: 'blur'
          // }],
          // image_id: [{
          //   required: true,
          //   message: '请输入真实姓名',
          //   trigger: 'blur'
          // }],
          // sort: [{
          //   required: true,
          //   message: '请输入真实姓名',
          //   trigger: 'blur'
          // }],
        }
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.isDelay = true
      }, 500)
      setTimeout(() => {
        this.isFirst = true
      }, 900)
      setTimeout(() => {
        this.isEnd = true
      }, 1500)
      setTimeout(() => {
        this.iscopy = true
      }, 1600)
    })
  },
  methods: {
    shopInfoChange(msg) {
      // console.log('1111111111+++++++++', msg)
      this.defaultMsg1 = msg
    },
    serverInfoChange(msg) {
      this.defaultMsg2 = msg
    },
    sprivacyInfoChange(msg) {
      this.defaultMsg3 = msg
    },
    copyInfoChange(msg) {
      this.defaultMsg4 = msg
    },
    formFormatCallBack(data, type, response) {
      if (type === 'editForm') {
        const { license, policy, agreement, copyright } = data
        console.log('data55555555555555555', data)
        this.defaultMsg1 = license
        this.defaultMsg2 = agreement
        this.defaultMsg3 = policy
        this.defaultMsg4 = copyright
      }
    },
    saveForm() {
      // 保存到你要的那个form值里面
      this.formFormatData.formData.license = this.defaultMsg1
      this.formFormatData.formData.agreement = this.defaultMsg2
      this.formFormatData.formData.policy = this.defaultMsg3
      this.formFormatData.formData.copyright = this.defaultMsg4
      this.formFormatSubmit()
    }
  }
}
</script>

<style lang="scss" scoped>
.merchandise-categories-add {}
</style>
